<template>
  <div class="price-box">
    <el-radio-group v-model="tabPosition">
      <el-radio-button label="1">按起订量配置</el-radio-button>
      <el-radio-button label="2">按单价配置</el-radio-button>
    </el-radio-group>
    <el-button type="primary" class="btn" @click="getAdd">新增</el-button>
    <!-- 起订量配置 -->
    <div class="priceStep" v-if="tabPosition == 1">
      <img
        class="mq-empty"
        src="@/assets/images/mq.png"
        alt=""
        v-if="pricebox.length == 0"
      />
      <div
        class="box-card"
        v-for="(item, index) in pricebox"
        :key="index"
        v-else
      >
        <div class="mq-box">
          <span>{{ item.name }}</span>
          <span>
            <i
              class="el-icon-edit-outline edit-icon"
              @click="getEdit(item.id,1)"
            ></i>
            <i
              class="el-icon-delete del-icon"
              @click="getDelete(item.id, 1)"
            ></i>
          </span>
        </div>
        <div class="table-box">
          <el-table :data="item.ladderPriceConfigData" style="width: 100%">
            <el-table-column prop="mq" label="起订量"> </el-table-column>
            <el-table-column prop="lower" label="降比（%）"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 按单价配置 -->
    <div v-if="tabPosition == 2" class="unitprice-box">
      <div class="price-wrapperbox">
        <el-radio v-model="currency" :label="1">人民币</el-radio>
        <el-radio v-model="currency" :label="2">美元</el-radio>
        <img
          class="price-empty"
          src="@/assets/images/price.png"
          alt=""
          v-if="priceList.length == 0"
        />
        <ul class="price_listbox" v-else>
          <li
            class="price-item"
            v-for="(item, index) in priceList"
            :key="index"
          >
            <div class="price-header">
              <p>{{ item.name }}</p>
              <p>
                <i
                  class="el-icon-edit-outline edit-icon"
                  @click="getEdit(item.id,2)"
                ></i>
                <i
                  class="el-icon-delete del-icon"
                  @click="getDelete(item.id,2)"
                ></i>
              </p>
            </div>
            <div class="price-table">
              <table>
                <tr>
                  <th>单价</th>
                  <th
                    colspan="5"
                    class="price-range"
                    v-for="(val, key) in priceList[index]
                      .ladderPriceAmountConfigData"
                    :key="key"
                  >
                    <span
                      v-if="
                        key != 0 &&
                        key !=
                          priceList[index].ladderPriceAmountConfigData.length -
                            1
                      "
                      >{{ val.minPrice }} ＜</span
                    >单价
                    <span
                      v-if="
                        key !=
                        priceList[index].ladderPriceAmountConfigData.length - 1
                      "
                      >≤</span
                    >
                    {{ val.maxPrice }}
                    <span
                      v-if="
                        key ==
                        priceList[index].ladderPriceAmountConfigData.length - 1
                      "
                      >﹥{{ val.minPrice }}</span
                    >
                  </th>
                  <th
                    colspan="5"
                    class="price-range"
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </th>
                  <th
                    colspan="5"
                    class="price-range"
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </th>
                  <th
                    colspan="5"
                    class="price-range"
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </th>
                </tr>
                <tr>
                  <th>起订量</th>
                  <!-- 1 -->
                  <td
                    v-for="(obj, j) in priceList[index]
                      .ladderPriceAmountConfigData[0].ladderPriceConfig"
                    :key="j"
                  >
                    {{ obj.mq }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[0]
                        .ladderPriceConfig.length -
                        1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[0]
                        .ladderPriceConfig.length -
                        1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[0]
                        .ladderPriceConfig.length -
                        1 <
                      4
                    "
                  >
                    -
                  </td>
                  <!-- 2 -->
                  <td
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[1].ladderPriceConfig"
                    :key="'id' + i"
                  >
                    {{ obj.mq }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[1]
                        .ladderPriceConfig.length -
                        1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[1]
                        .ladderPriceConfig.length -
                        1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[1]
                        .ladderPriceConfig.length -
                        1 <
                      4
                    "
                  >
                    -
                  </td>
                  <!-- 3 -->
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-else
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[2].ladderPriceConfig"
                    :key="'2' + i"
                  >
                    {{ obj.mq }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        2 &&
                      priceList[index].ladderPriceAmountConfigData[2]
                        .ladderPriceConfig.length -
                        1 <
                        2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        2 &&
                      priceList[index].ladderPriceAmountConfigData[2]
                        .ladderPriceConfig.length -
                        1 <
                        3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        2 &&
                      priceList[index].ladderPriceAmountConfigData[2]
                        .ladderPriceConfig.length -
                        1 <
                        4
                    "
                  >
                    -
                  </td>
                  <!-- 4 -->
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-else
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[3].ladderPriceConfig"
                    :key="'3' + i"
                  >
                    {{ obj.mq }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        3 &&
                      priceList[index].ladderPriceAmountConfigData[3]
                        .ladderPriceConfig.length -
                        1 <
                        2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        3 &&
                      priceList[index].ladderPriceAmountConfigData[3]
                        .ladderPriceConfig.length -
                        1 <
                        3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        3 &&
                      priceList[index].ladderPriceAmountConfigData[3]
                        .ladderPriceConfig.length -
                        1 <
                        4
                    "
                  >
                    -
                  </td>
                  <!-- 5 -->
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-else
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[4].ladderPriceConfig"
                    :key="'4' + i"
                  >
                    {{ obj.mq }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        4 &&
                      priceList[index].ladderPriceAmountConfigData[4]
                        .ladderPriceConfig.length -
                        1 <
                        2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        4 &&
                      priceList[index].ladderPriceAmountConfigData[4]
                        .ladderPriceConfig.length -
                        1 <
                        3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        4 &&
                      priceList[index].ladderPriceAmountConfigData[4]
                        .ladderPriceConfig.length -
                        1 <
                        4
                    "
                  >
                    -
                  </td>
                </tr>
                <tr>
                  <th>降比（%）</th>
                  <!-- 1 -->
                  <td
                    v-for="(obj, j) in priceList[index]
                      .ladderPriceAmountConfigData[0].ladderPriceConfig"
                    :key="'5' + j"
                  >
                    {{ obj.lower }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[0]
                        .ladderPriceConfig.length -
                        1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[0]
                        .ladderPriceConfig.length -
                        1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[0]
                        .ladderPriceConfig.length -
                        1 <
                      4
                    "
                  >
                    -
                  </td>
                  <!-- 2 -->
                  <td
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[1].ladderPriceConfig"
                    :key="'6' + i"
                  >
                    {{ obj.lower }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[1]
                        .ladderPriceConfig.length -
                        1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[1]
                        .ladderPriceConfig.length -
                        1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData[1]
                        .ladderPriceConfig.length -
                        1 <
                      4
                    "
                  >
                    -
                  </td>
                  <!-- 3 -->
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      2
                    "
                  >
                    -
                  </td>
                  <td
                    v-else
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[2].ladderPriceConfig"
                    :key="'7' + i"
                  >
                    {{ obj.lower }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        2 &&
                      priceList[index].ladderPriceAmountConfigData[2]
                        .ladderPriceConfig.length -
                        1 <
                        2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        2 &&
                      priceList[index].ladderPriceAmountConfigData[2]
                        .ladderPriceConfig.length -
                        1 <
                        3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        2 &&
                      priceList[index].ladderPriceAmountConfigData[2]
                        .ladderPriceConfig.length -
                        1 <
                        4
                    "
                  >
                    -
                  </td>
                  <!-- 4 -->
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      3
                    "
                  >
                    -
                  </td>
                  <td
                    v-else
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[3].ladderPriceConfig"
                    :key="'8' + i"
                  >
                    {{ obj.lower }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        3 &&
                      priceList[index].ladderPriceAmountConfigData[3]
                        .ladderPriceConfig.length -
                        1 <
                        2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        3 &&
                      priceList[index].ladderPriceAmountConfigData[3]
                        .ladderPriceConfig.length -
                        1 <
                        3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        3 &&
                      priceList[index].ladderPriceAmountConfigData[3]
                        .ladderPriceConfig.length -
                        1 <
                        4
                    "
                  >
                    -
                  </td>
                  <!-- 5 -->
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 <
                      4
                    "
                  >
                    -
                  </td>
                  <td
                    v-else
                    v-for="(obj, i) in priceList[index]
                      .ladderPriceAmountConfigData[4].ladderPriceConfig"
                    :key="'9' + i"
                  >
                    {{ obj.lower }}
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        4 &&
                      priceList[index].ladderPriceAmountConfigData[4]
                        .ladderPriceConfig.length -
                        1 <
                        2
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        4 &&
                      priceList[index].ladderPriceAmountConfigData[4]
                        .ladderPriceConfig.length -
                        1 <
                        3
                    "
                  >
                    -
                  </td>
                  <td
                    v-if="
                      priceList[index].ladderPriceAmountConfigData.length - 1 >=
                        4 &&
                      priceList[index].ladderPriceAmountConfigData[4]
                        .ladderPriceConfig.length -
                        1 <
                        4
                    "
                  >
                    -
                  </td>
                </tr>
              </table>
            </div>
          </li>
        </ul>
      </div>
      
      <!-- <unitpriceConfig @editData="editPriceData" @deleteData="getDelete" :typeEvent="typeEvent"></unitpriceConfig> -->
    </div>
    <!-- 新增 -->
    <add ref="drawer" @getList="getList"></add>
    <!-- 编辑 -->

    <el-dialog
      title="删除"
      :visible.sync="dialogDelVisible"
      width="20%"
      class="cancel-dialog"
    >
      <div class="del-box">
        <i class="el-icon-delete del-icon"></i>
        <p class="del-content">您确认删除该阶梯价格吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deletePrice()">确认</el-button>
        <el-button @click="dialogDelVisible = false" class="resletBtn">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="正在使用"
      :visible.sync="dialogUserVisible"
      width="20%"
      class="cancel-dialog"
    >
      <div class="del-box">
        <img src="@/assets/images/plan.png" alt="" class="concel-icon" />
        <p class="del-content">当前阶梯价格正在使用</p>
        <p class="useTips">请修改相关库存价格配置后可删除</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogUserVisible = false"
          >确认</el-button
        >
        <el-button @click="dialogUserVisible = false"  class="resletBtn">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  priceList,
  judgeIfUsedByInventory,
  addPrice,
  editPrice,
  deletePrice,
  priceStepList,
} from "@/api/stock";
import unitpriceConfig from "./component/unitpriceConfig.vue";
import add from "./component/add.vue";
export default {
  name: "steppedPrice",
  components: {
    unitpriceConfig,
    add,
  },
  data() {
    return {
      tabPosition: 1,
      pricebox: [],
      dialogAddVisible: false,
      dialogEditVisible: false,
      dialogDelVisible: false,
      dialogUserVisible: false,
      addForm: {
        name: "",
        ladderPriceConfig: [
          {
            lower: "",
            mq: "",
          },
          {
            lower: "",
            mq: "",
          },
        ],
      },
      rules: {
        name: [
          { required: true, message: "请输入阶梯价格名称", trigger: "blur" },
        ],
      },
      addFirstForm: {},
      priceId: 0,
      editForm: {
        name: "",
        ladderPriceConfig: [
          {
            lower: "",
            mq: "",
          },
        ],
      },
      editRules: {
        name: [
          { required: true, message: "请输入阶梯价格名称", trigger: "blur" },
        ],
      },
      isError: [],
      isLowerError: [],
      iseditError: [],
      iseditLowerError: [],
      typeEvent: "",
      type: "",
      currency:1,
      priceList:[],
      formLabelWidth: "93px",
    };
  },
  methods: {
    stepPriceList(val){
        priceStepList(val).then(res=>{
            if(res.success){
                this.priceList = res.result.data;
                console.log(this.priceList,'ressssss');
            }else{
                this.$message.error(res.message);
            }
            
        })
    },
    // 编辑起订量
    blureEditMq(e) {
      this.editForm.ladderPriceConfig.map((item, index) => {
        this.$set(this.iseditError, index, false);
        if (item.mq == e.target.value) {
          if (index > 0) {
            if (
              item.mq != "" &&
              this.editForm.ladderPriceConfig[index - 1].mq != "" &&
              parseFloat(item.mq) <=
                parseFloat(this.editForm.ladderPriceConfig[index - 1].mq)
            ) {
              console.log(index, "44444444");
              this.iseditError[index] = true;
            } else {
              this.iseditError[index] = false;
            }
            console.log(this.iseditError);
          }
        }
      });
    },
    blurEditLower(e) {
      console.log(
        e,
        this.editForm.ladderPriceConfig,
        "this.editForm.ladderPriceConfig"
      );
      this.editForm.ladderPriceConfig.map((item, index) => {
        this.$set(this.iseditLowerError, index, false);
        if (item.lower == e.target.value) {
          if (index > 0) {
            if (
              item.lower != "" &&
              this.editForm.ladderPriceConfig[index - 1].lower != "" &&
              parseFloat(item.lower) <=
                parseFloat(this.editForm.ladderPriceConfig[index - 1].lower)
            ) {
              this.iseditLowerError[index] = true;
            } else {
              this.iseditLowerError[index] = false;
            }
          }
        }
      });
    },
    // 新增
    getAdd() {
      this.$refs.drawer.open();
      // this.dialogAddVisible = true;
    },
    getaddSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let arr = false;
          for (
            let index = 0;
            index < this.addForm.ladderPriceConfig.length;
            index++
          ) {
            for (
              let index2 = 1;
              index2 < this.addForm.ladderPriceConfig.length;
              index2++
            ) {
              if (
                index2 > index &&
                (Number(this.addForm.ladderPriceConfig[index2].mq) <=
                  Number(this.addForm.ladderPriceConfig[index].mq) ||
                  Number(this.addForm.ladderPriceConfig[index2].lower) <=
                    Number(this.addForm.ladderPriceConfig[index].lower))
              ) {
                arr = true;
              }
            }
          }
          if (arr) {
            this.$message.error("请按照从低到高的规则输入数据");
            return false;
          }
          addPrice(this.addForm).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.dialogAddVisible = false;
              this.$refs.addForm.resetFields();
              this.getPriceList();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    getAddPrice() {
      if (this.addForm.ladderPriceConfig.length <= 4) {
        this.addForm.ladderPriceConfig.push({
          lower: "",
          mq: "",
        });
      } else {
        this.$message.warning("抱歉！不能再添加了，阶梯价格最多可配置5级。");
      }
    },
    closeaddDialog() {
      this.$refs["addForm"].resetFields();
      this.addForm.ladderPriceConfig = [
        {
          lower: "",
          mq: "",
        },
        {
          lower: "",
          mq: "",
        },
      ];
    },
    closeDialog() {
      this.$refs["editForm"].resetFields();
      this.editForm.ladderPriceConfig = [
        {
          lower: 0,
          mq: 0,
        },
      ];
    },
    getDel(item, index) {
      this.addForm.ladderPriceConfig.splice(index, 1);
    },
    geteditDel(item, index) {
      this.editForm.ladderPriceConfig.splice(index, 1);
    },
    getEditPrice() {
      if (this.editForm.ladderPriceConfig.length <= 4) {
        this.editForm.ladderPriceConfig.push({
          lower: "",
          mq: "",
        });
      } else {
        this.$message.warning("抱歉！不能再添加了，阶梯价格最多可配置5级。");
      }
    },
    // 编辑
    getEdit(id,type) {
      this.$refs.drawer.open(id,type);
    },
    editPriceData(data) {
      this.$refs.drawer.open(data);
    },
    // deletePriceData(data){

    // },
    geteditSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let arr = false;
          for (
            let index = 0;
            index < this.editForm.ladderPriceConfig.length;
            index++
          ) {
            for (
              let index2 = 1;
              index2 < this.editForm.ladderPriceConfig.length;
              index2++
            ) {
              if (
                index2 > index &&
                (Number(this.editForm.ladderPriceConfig[index2].mq) <=
                  Number(this.editForm.ladderPriceConfig[index].mq) ||
                  Number(this.editForm.ladderPriceConfig[index2].lower) <=
                    Number(this.editForm.ladderPriceConfig[index].lower))
              ) {
                arr = true;
              }
            }
          }
          if (arr) {
            this.$message.error("请按照从低到高的规则输入数据");
            return false;
          }
          editPrice(this.editForm).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.dialogEditVisible = false;
              this.getPriceList();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    // 删除
    getDelete(id, type) {
      console.log(id, type, "npm install --save swiper/swiper-bundle.css");
      this.type = type;
      this.priceId = id;
      judgeIfUsedByInventory(this.priceId).then((res) => {
        if (res.result) {
          this.dialogUserVisible = true;
        } else {
          this.dialogDelVisible = true;
        }
      });
    },
    deletePrice() {
      deletePrice(this.priceId).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.$message.success(res.message);
            this.dialogDelVisible = false;
            if (this.type == 1) {
              this.getPriceList();
            } else {
                // this.currency = 1;
                this.stepPriceList(this.currency);
            //   this.typeEvent = this.type;
            }
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getList(data) {
      console.log(data, "dataaaaaaaaaaaa");
      if (data == 1) {
        this.getPriceList();
      } else {
        // this.currency = 1;
        this.stepPriceList(this.currency);
      }
    },
    getPriceList() {
      priceList().then((res) => {
        console.log(res, "priceList");
        if (res.success) {
          this.pricebox = res.result.data;
          this.pricebox.map(item=>{
            if(item.ladderPriceConfigData.length == 2){
              item.ladderPriceConfigData.push(
                {
                  mq:'-',
                  lower:'-'
                },
                {
                  mq:'-',
                  lower:'-'
                },{
                  mq:'-',
                  lower:'-'
                },
              )
            }
            if(item.ladderPriceConfigData.length == 3){
              item.ladderPriceConfigData.push({
                  mq:'-',
                  lower:'-'
                },
                {
                  mq:'-',
                  lower:'-'
                })
            }
            if(item.ladderPriceConfigData.length == 4){
              item.ladderPriceConfigData.push({
                  mq:'-',
                  lower:'-'
                },
                )
            }
          })
          console.log(this.pricebox, "this.pricebox");
        }
      });
    },
  },
  created() {
    this.addFirstForm = this.addForm.ladderPriceConfig[0];
    this.getPriceList();
  },
  watch:{
    currency:{
        handler(val,old){
            this.stepPriceList(val);
        },
        immediate:true,
        deep:true,
    }
  }
};
</script>

<style scoped lang="scss">
.price-box {
  height: calc(100vh - 120px);
  overflow-y: auto;
  background-color: #fff;
  padding: 24px 0;
  .btn {
    height: 32px !important;
    line-height:32px !important;
    margin: 0 20px 20px;
  }
  .priceStep {
    width: 100%;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .box-card {
      width: 19%;
      margin-right: 19px;
      margin-bottom: 20px;
      padding: 12px 10px 20px;
      border-radius: 2px;
      border: 1px solid #eeeeee;
      .mq-box{
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        span{
          display: block;
          &:first-child{
            font-weight: 600;
          }
        }
      }
      &:nth-child(5n) {
        margin-right: 0;
      }

      .table-box {
        background: rgba(0, 143, 255, 1);
      }
    }
    .mq-empty {
      height: 385px;
      display: block;
      margin: 30px auto 0;
    }
  }
  .unitprice-box {
    width: 100%;
  }
  .line {
    text-align: right;
  }
  .percent {
    line-height: 35px;
    text-align: center;
  }
  .price-wrapperbox {
    width: 100%;

    .price-empty {
      height: 385px;
      display: block;
      margin: 30px auto 0;
    }
  }
  .price_listbox {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin: 20px 0 0;
    p {
      margin: 0;
    }
    .price-item {
      width: 100%;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #eeeeee;
      padding: 12px 20px 14px 10px;
      margin-bottom: 15px;

      .edit-icon {
        color: #008fff;
        font-size: 14px;
        margin-right: 10px;
      }
      .del-icon {
        font-size: 14px;
        text-align: center;
        color: #e02020;
      }
      .price-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
        margin-bottom: 15px;
      }
      .price-table {
        width: 100%;
        border: 1px solid #eeeeee;
        table {
          width: 100%;
          tr {
            th {
              font-size: 12px;
              color: #000000;
              font-weight: 400 !important;
              padding: 4px 0 6px 5px;
              line-height: 17px;
              &:first-child {
                width: 4.6%;
                background: #eeeeee;
              }
            }
            .price-range {
              text-align: center;
              border-right: 1px solid #eeeeee;
              &:last-child {
                border-right: none;
              }
            }
            td {
              width: 3.6%;
              padding: 4px 0px 6px 13px;
              font-size: 12px;
              font-weight: 400;
              color: #000000;
              line-height: 17px;
              border-right: 1px solid #eeeeee;
              &:last-child {
                border-right: none;
              }
            }
            &:nth-child(2) {
              border-top: 1px solid #eeeeee;
              border-bottom: 1px solid #eeeeee;
            }
          }
        }
      }
    }
  }
  .add-icon {
    font-size: 16px;
    // color: #EEEEEE;
  }
  .concel-icon {
    width: 60px;
    height: 60px;
    display: block;
  }
  .second-error {
    padding-left: 60%;
  }
  .edit-icon {
    color: #008fff;
    font-size: 14px;
    margin-right: 10px;
  }
  .num-error {
    color: #ff4949;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
  }
  .del-icon {
    font-size: 14px;
    text-align: center;
    // line-height: 35px;
    color: #e02020;
  }
  .add-btn {
    margin: 40px 0 40px 40px;
  }
  .ialog-footer {
    text-align: center;
  }
  .del-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .del-icon {
      font-size: 50px;
      color: #2348E8;
    }
    .del-content {
      font-size: 24px;
      font-weight: 600;
      color: #333333;
      line-height: 22px;
    }
    .useTips {
      font-size: 14px;
      font-weight: 400;
      color: rgba(119, 119, 119, 0.65);
      line-height: 22px;
    }
  }
  .cancel-dialog {
    ::v-deep .el-dialog:not(.is-fullscreen) {
      margin-top: 28vh !important;
      .el-dialog__header {
        display: none;
      }
    }
  }
  .add-dialog {
    ::v-deep .el-dialog:not(.is-fullscreen) {
      margin-top: 20vh !important;
    }
  }
}
.addform {
  ::v-deep .el-form-item__label {
    font-weight: 500 !important;
  }
}
.editForm {
  ::v-deep .el-form-item__label {
    font-weight: 500 !important;
  }
}
.dialog-footer {
  text-align: center;
}
.footer-tips {
  color: #726f6f;
  font-size: 14px;
  span {
    color: #e02020;
    margin-right: 5px;
  }
}
</style>